<template>
	<scroll-view scroll-y="true">
		<view class="commoditys-container">
			<!-- 上面审核订单 -->
			<cardShowList title="订单状态">
				<view class="view_white">
					<image src="/static/images/jiesuan.png" style="width: 140rpx; height: 140rpx; margin-top: -40rpx">
					</image>
					<view class="goodsinfo">
						<view style="
                margin-top: 32rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
              ">
							<text style="color: #ff4a00; font-size: 44rpx; font-weight: bold">订单已完成</text>
							<text style="color: #f3a140; font-size: 28rpx; margin: 20rpx">订单已完成,您无需付款</text>
						</view>
					</view>
				</view>
			</cardShowList>

		
			<cardShowList title="订单详情">
				<view class="fs30 pl20">
					<view class="orderListLine">
						<text class="mr16">订单编号:</text>
						<text class="sf">{{ order.order_no }}</text>
					</view>
					<view class="orderListLine">
						<text class="mr16">订单时间:</text>
						<text class="sf">{{ order.create_time }}</text>
					</view>
					<view class="orderListLine">
						<text class="mr16">用户姓名:</text>
						<text class="sf">{{ order.user.nickname }}</text>
					</view>
					<view class="orderListLine">
						<text class="mr16">订单状态:</text>
						<text class="sf">已完成</text>
					</view>
					<view class="orderListLine">
						<text class="mr16">设备地址:</text>
						<text class="sf">{{ order.device.location }}</text>
					</view>
				</view>
			</cardShowList>

			<cardShowList title="购物视频" v-if="order.medias.videos.length">
				<view v-for="(item, index) in order.medias.videos" :key="index" style="display: flex; flex-direction: column; align-items: center;">
					<video id="myVideo" :src="item" @error="videoErrorCallback" autoplay muted object-fit="contain"
						class="mb30"></video>
				</view>
			</cardShowList>

			<view class="h100"></view>
		</view>

	</scroll-view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref,
		defineProps
	} from "vue";
	import cardShowList from "../../../components/cardShowList/cardShowList.vue";

	const props = defineProps({
		orderDetail: {
			type: Object,
			required: true
		}
	});
	const order = ref(props.orderDetail)


	// 展开收起功能
	const expanded = ref(false);

	function toggleExpand() {
		expanded.value = !expanded.value;
	}








	const waresTotal = computed(() => {
		let sum = 0;
		if (!order.value) {
			return sum;
		}
		order.value.goods.forEach((item) => (sum += item.count));
		return sum;
	});
</script>

<style lang="scss" scoped>
	.commoditys-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #f3f3f3;
	}

	.orderListLine {
		margin-bottom: 16rpx;
	}

	.view_white {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
		background-color: #fff;
		border-radius: 10rpx;
	}
</style>